<template>
  <c-popup v-model="modelValue">
    <view class="service-box">
      <view class="service-title">可领优惠券</view>
      <view class="content flex al-center" v-for="(item, i) in props.couponList" :key="i">
        <view class="name">{{ getCouponName(item) }}</view>
        <view class="grow"></view>
        <c-button v-if="item.canReceive" type="primary" size="mini" @tap="onTake(item)">领取</c-button>
        <c-button v-else type="primary" disabled size="mini" >已领取</c-button>
      </view>
    </view>
  </c-popup>
</template>
<script setup>
import api from '@/api';
import { CButton, CNumber, CPopup } from '@/components';
import { View } from '@tarojs/components';
const modelValue = defineModel(Boolean);
const props = defineProps({
  couponList: Array
});

const getCouponName = item => {
  if (!item) return '-';
  if (item.couponType == 1) {
    if (item.threshold) {
      return `满${item.threshold}打${item.discountValue}折`;
    }
    return `${item.discountValue}折`;
  } else {
    if (item.threshold) {
      return `满${item.threshold}减${item.discountValue}`;
    }
    return `立减${item.discountValue}元`;
  }
};
const onTake = item => {
  return api.mk.couponReceive({ value: item.code }).toast('领取成功', true);
};
</script>
<style lang="scss">
.service-box {
  padding: 30px;
  padding-top: 20px;
  padding-bottom: max(30px, var(--safe-bottom));

  .service-title {
    text-align: center;
    font-weight: bold;
    font-size: 36px;
    line-height: 60px;
  }
  .content {
    border-bottom: var(--onepx) solid var(--color-line);
    padding: 18px 0;
    .name {
      font-weight: bold;
      margin-bottom: 10px;
    }
    .desc {
      font-size: 26px;
      color: var(--color-gray);
    }
  }
}
</style>
